<!-- 菜单页面详情 -->
<template>
  <div class="app-container">
    <el-form ref="menuForm" :model="menuForm" :rules="rules" label-width="80px" style="width:680px;">
      <el-form-item label="菜单名称" prop="name">
        <el-input
          v-model="menuForm.name"
          placeholder="请输入菜单名称"
          clearable/>
      </el-form-item>
      <el-form-item label="父菜单" prop="fId">
        <tree-select v-model="menuForm.fId" :options="options" :value="value" :normalizer="normalizer" placeholder="默认顶级菜单"/>
      </el-form-item>
      <el-form-item label="网址" prop="url">
        <el-input
          v-model="menuForm.url"
          placeholder="请输入网址"
          clearable/>
      </el-form-item>
      <el-form-item label="资源类型" prop="type">
        <el-select v-model="menuForm.type" placeholder="请选择资源类型">
          <el-option label="菜单" value="menu"/>
          <el-option label="接口" value="interface"/>
        </el-select>
      </el-form-item>
      <el-form-item label="显示顺序" prop="priority">
        <el-input
          v-model.number="menuForm.priority"
          placeholder="请输入显示顺序，只能是数字"
          clearable/>
      </el-form-item>
      <el-form-item label="访问权限" prop="permission">
        <el-select v-model="menuForm.permission" placeholder="请选择访问权限">
          <el-option label="匿名访问" value="anon"/>
          <el-option label="登录访问" value="user"/>
          <el-option label="特定访问" value="perms"/>
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用" prop="available">
        <el-select v-model="menuForm.available" placeholder="请选择是否启用">
          <el-option label="启用" value="1"/>
          <el-option label="禁用" value="0"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">立即添加</el-button>
        <el-button @click="resetForm('menuForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { validatePath } from '@/utils/validate'
import { add } from '@/api/menuNav'

const constMenuForm = {
  name: '', // 名称
  fId: null, // 父Id
  url: '', // 访问网址
  type: '', // '资源类型，如menu表示菜单，button代表按钮'
  priority: '', // 显示顺序
  permission: '', // 权限
  available: '' // 是否可用 (1:可用，0:不可用)
}

export default {
  name: 'MenuNavDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validateSourceUri = (rule, value, callback) => {
      if (value) {
        if (validatePath(value)) {
          callback()
        } else {
          callback(new Error('网址url填写不正确'))
        }
      } else {
        callback()
      }
    }
    return {
      menuForm: Object.assign({}, constMenuForm),
      loading: false,
      rules: {
        name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        url: [{ required: true, message: '请选择资源类型', trigger: 'blur' }, { validator: validateSourceUri, trigger: 'blur' }],
        type: [{ required: true, message: '请选择资源类型', trigger: 'blur' }],
        priority: [
          { required: true, message: '请输入显示顺序', trigger: 'blur' },
          { message: '必须是数字', trigger: 'blur', type: 'number' }
        ],
        permission: [{ required: true, message: '请选择权限', trigger: 'blur' }],
        available: [{ required: true, message: '请选择是否启用', trigger: 'blur' }]
      },
      value: null,
      options: [{
        id: 1,
        name: 'a',
        subOptions: [{
          id: 2,
          name: 'aa'
        }]
      }, {
        id: 3,
        name: 'b'
      }],
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.subOptions
        }
      }
    }
  },
  methods: {
    submitForm() {
      console.log('已提交')
      this.$refs.menuForm.validate(valid => {
        if (valid) {
          /* this.loading = true
          this.$notify({
            title: '成功',
            message: '发布文章成功',
            type: 'success',
            duration: 2000
          })
          this.postForm.status = 'published'
          this.loading = false*/
          this.loading = true
          add(this.menuForm).then(response => {

          }).catch(() => {
            this.loading = false
          })
          this.loading = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
</style>
